<template>
  <div class="top">
    <div class="top_xiaoshou">
      <hearderCardVue
        :infomountcount="infomountcount"
        :infoamount="infoAmount"
      />
    </div>
    <div class="among" />
    <div class="char_box">
      <div class="header">
        <div class="title">
          销售数据<span class="sub-title">{{ timers }}</span>
        </div>
        <div class="week-month-year">
          <div class="item" :class="{'is-checked': istype==='week'? true:false}" @click="changetype('week')">周</div>
          <div class="item" :class="{'is-checked': istype==='month'? true:false}" @click="changetype('month')">月</div>
          <div class="item" :class="{'is-checked': istype==='year'? true:false}" @click="changetype('year')">年</div>
        </div>
      </div>
      <EchearVue ref="changetype" @toptimer="topTimer" />
    </div>
  </div>
</template>

<script>
import hearderCardVue from './components/hearderCard.vue'
import EchearVue from './components/Echear.vue'
import {
  getPartner,
  getpartnerCollect,
  getorderCount,
  getorderAmount
} from '@/api/statistics'
import { getTime } from '@/utils/date'

export default {
  components: {
    hearderCardVue,
    EchearVue
  },
  data() {
    return {
      queryObj: {
        pageIndex: 1,
        pageSize: 10000
      },
      infomountcount: 0,
      infoAmount: 0,
      infotalBill: 0,
      istype: 'week',
      timers: '',
      objs: {}
    }
  },

  created() {
    this.getPartner()
    const date = getTime()
    this.month = date[0]
    this.day = date[1]
    this.getorderCount()
    this.getorderAmount()
  },
  mounted() {
  },
  methods: {
    async changetype(type) {
      this.istype = type
      this.$refs.changetype.changetype(this.istype)
    },
    async getPartner() {
      const data = await getPartner(this.queryObj)
      this.info_Data = data.currentPageRecords
    },
    async getpartnerCollect() {
      await getpartnerCollect()
    },
    objData() {
      const obj = {}
      console.log(this.day)
      obj.start = this.day[0] + ' ' + '00:00:00'
      obj.end = this.day[1] + ' ' + '23:59:59'
      return obj
    },
    async getorderCount() {
      const data = await getorderCount(this.objData())
      this.infomountcount = Number(data)
    },
    async getorderAmount() {
      const data = await getorderAmount(this.objData())
      this.infoAmount = Number(data)
    },
    // 最上边时间
    topTimer(timer) {
      this.timers = timer
    }

  }
}
</script>

<style lang="scss" scoped>

.top {
  margin-top: 70px;
  background-color: #faf8f8;
  height: 950px;
  .top_xiaoshou{
  margin-bottom: 30px;
  margin-left: 20px;
  }
}
.among{
width: 300px;
height: 538px;
background-color: pink;
position: absolute;
right: 0;
top: 70px;
}
.char_box {
  // padding: 20px;
margin-left: 20px;
  width: 970px;
  height: 352px;
  background-color: #fff;
}
.header {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  display: flex;
}
.title {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  flex: 1;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333;
}
.sub-title {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  margin-left: 10px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999;
}
.week-month-year {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue,
    Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  -webkit-box-direction: normal;
  box-sizing: border-box;
  width: 129px;
  height: 34px;
  background: rgba(233, 243, 255, 0.37);
  border-radius: 10px;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}
.is-checked{
      line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 37px;
    height: 25px;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
    border-radius: 7px;
    font-weight: 600;
    color: #333;
}
.item{
      line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    width: 37px;
    height: 25px;
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
}

</style>
